import { React, useEffect, useState } from 'react';
import './mybill.css';
import '../../../index.css';
import axios from 'axios';
import InterIP from '../../../IP/IP';
import { Pagination } from 'antd';


export default function Mybill() {
    const [twig, setTwig] = useState();
    const [mybillArr, setmybillArr] = useState([])


    useEffect(() => {
        var userID = document.cookie.slice(5);
        let IP = InterIP().props.children;
        axios.post("http://" + IP + ":3000/user/selBill", {
            user_id: userID,
            page: '1',
        })
            .then((res) => {
                setTwig((twig) => twig = res.data.rows_length)
                setmybillArr((mybillArr) => mybillArr = res.data.rows)

            })
    }, []);

    function mabill_pagingye(page) {
        var userID = document.cookie.slice(5);
        let IP = InterIP().props.children;
        axios.post("http://" + IP + ":3000/user/selBill", {
            user_id: userID,
            page: page,
        })
            .then((res) => {
                setTwig((twig) => twig = res.data.rows_length)
                setmybillArr((mybillArr) => mybillArr = res.data.rows)
            })
    }

    return (
        <div id="mybill">
            <div className="mybill_top">我的账单</div>
            <div className="mybill_main">
                <table cellSpacing="0">
                    <thead>
                        <tr>
                            <th>操作</th>
                            <th>金额变更</th>
                            <th>账户余额</th>
                            <th>时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {mybillArr.map((data) => {
                            return (
                                <tr key={data.bill_id}>
                                    <td>{data.bill_type}</td>
                                    <td>{data.consume_money}</td>
                                    <td>{data.balance}</td>
                                    <td>{data.consume_time}</td>
                                </tr>
                            )
                        })}

                    </tbody>
                </table>
            </div>
            <Pagination className="mybill_paging" onChange={mabill_pagingye} total={twig} pageSize={10}
            ></Pagination>
        </div>
    )
}
